<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
    <head>
        <title>Thymeleaf Interactive Tutorial</title>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="../../css/exercise.css" th:href="@{/css/exercise.css}" />
        <link rel="stylesheet" href="../../jquery/jquery-ui-1.9.2.custom.min.css" th:href="@{/jquery/jquery-ui-1.9.2.custom.min.css}" />
        <script th:src="@{/jquery/jquery-1.8.3.min.js}"></script>
        <script th:src="@{/jquery/jquery-ui-1.9.2.custom.min.js}"></script>
        <script src="http://use.edgefonts.net/source-code-pro.js"></script>
        <script th:src="@{/ace/src-min-noconflict/ace.js}" type="text/javascript" charset="utf-8"></script>
        <script th:src="@{/js/StrokeDetector.js}"></script>
        <script th:src="@{/js/Editor.js}"></script>
        <script th:src="@{/js/ViewUpdater.js}"></script>
        <script th:src="@{/js/Solution.js}"></script>
        <script th:src="@{/js/Dialog.js}"></script>
        <script th:inline="javascript">
            // <![CDATA[
            var CONTEXT_PATH = /*[[@{/}]]*/ '/';
            var EXERCISE = /*[[${exercise.index}]]*/ 1;
            var EDITOR, GENERATED_SOURCE;
            var VIEW_UPDATER, SOLUTION;
            var INSTRUCTIONS, ABOUT;
            
            var question = /*[[${question}]]*/ '<h1>Template</h1>';
            
            $(document).ready(function() {
                INSTRUCTIONS = new Dialog('instructions');
                ABOUT = new Dialog('about');
                ABOUT.close();
                EDITOR = new Editor('editor');
                EDITOR.setCode(question);
                GENERATED_SOURCE = new Editor('generated-source');
                GENERATED_SOURCE.makeReadOnly();
                VIEW_UPDATER = new ViewUpdater(EDITOR, GENERATED_SOURCE, 'static-view', 'dynamic-view', CONTEXT_PATH);
                SOLUTION = new Solution(CONTEXT_PATH, EXERCISE, EDITOR, VIEW_UPDATER.updateAll);
                new StrokeDetector('editor', VIEW_UPDATER.updateAll);
                VIEW_UPDATER.updateAll();
            });
            // ]]>
        </script>
    </head>
    <body>
        <header>
            <h1>Thymeleaf Interactive Tutorial</h1>
            <span th:text="${exercise.description}">Exercise 1: bean values</span>
            <nav>
                <a th:if="${exercise.previous}"
                   href="exercise.html"
                   th:href="@{/exercise/__${exercise.previous.index}__}">Previous</a>
                <a href="index.html"
                   th:href="@{/}">Index</a>
                <a th:if="${exercise.next}"
                   href="exercise.html"
                   th:href="@{/exercise/__${exercise.next.index}__}">Next</a>
                <a href="javascript:ABOUT.toggle()">About</a>
            </nav>
        </header>
        <div id="instructions"
             th:title="'Instructions for ' + ${exercise.description}"
             th:include="@{__${exercise.path}__/instructions.html} :: [//body]">
            These are the instructions for Exercise 1.
        </div>
        <div id="about"
             title="About the Thymeleaf Interactive Tutorial"
             th:include="about.html :: [//body]">
            Thymeleaf is...
        </div>
        <div id="leftcol">
            <h2>Source code</h2>
            <nav>
                <a href="javascript:INSTRUCTIONS.toggle()">Instructions</a>
                <a href="javascript:SOLUTION.show();">Show solution</a>
            </nav>
            <div id="editor"></div>
            <h2>Static view</h2>
            <iframe id="static-view"></iframe>
        </div>
        <div id="rightcol">
            <h2>Generated source</h2>
            <div id="generated-source"></div>
            <h2>Dynamic view</h2>
            <iframe id="dynamic-view"></iframe>
        </div>
        <footer>
            <span>The Thymeleaf Interactive Tutorial</span>
        </footer>
    </body>
</html>
